<template>
  <ol class="breadcrumb w-breadcrumb">
    <li v-for="item in breadcrumbs" v-if="$index < breadcrumbCount - 1">
      <a href="#" @click.stop.prevent="onBreadcrumbClick(item, $event)">{{ item.text }}</a>
    </li>
    <li v-for="item in breadcrumbs" class="active" v-if="$index == breadcrumbCount - 1">
      {{ item.text }}
    </li>
  </ol>
</template>

<script type='text/babel'>
  export default {
    props: {
      breadcrumbs: Array,
      default: function () {
        return []
      }
    },
    computed: {
      breadcrumbCount: function () {
        return this.breadcrumbs.length
      }
    },
    methods: {
      onBreadcrumbClick: function (item, event) {
        var self = this
        if (self.$router) {
          self.$router.go(item.route)
        }
      }
    }
  }
</script>

<style lang="less">
  .w-breadcrumb {
    margin-bottom: 4px;
  }
</style>
